<template>
    <div class="navbar">
        <van-nav-bar title="哔哩收银台" left-arrow @click-left="$router.go(-1)" />
    </div>
    <div class="payfor">
        <span class="left">￥</span>
        <span class="right">{{ price }}</span>
    </div>
    <div>
        <van-checkbox-group v-model="checked" :max="1">
            <van-cell-group inset>
                <van-cell v-for="(item, index) in list" clickable :key="item" :title="item" @click="toggle(index)">
                    <template #right-icon>
                        <van-checkbox :name="item" :ref="el => checkboxRefs[index] = el" @click.stop />
                    </template>
                </van-cell>
            </van-cell-group>
        </van-checkbox-group>
    </div>
    <div class="button">
        <van-button color="linear-gradient(to right, #ff6034, #ee0a24)" round type="primary" block @click="submit">
            确认付款
        </van-button>
    </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
import { ref, onBeforeUpdate } from 'vue';
import { showToast } from 'vant';
import { DeleteCarItem, } from '@/api/api'
import { useUserInfoStore } from '@/stores/useInfo';


const store = useUserInfoStore()
const userid = store.getUserId
const router = useRouter()
const price = Number(router.currentRoute.value.query.price) / 100
const checked = ref<any[]>([]);
const checkboxRefs = ref<any[]>([]);

const list = ['建设银行储蓄卡',
    '邮政银行储蓄卡', '招商银行储蓄卡', '工商银行储蓄卡', '微信支付', '支付宝支付',]
const toggle = (index: number) => {
    checked.value = [];
    checked.value.push(list[index])
    console.log(checked.value);

};

const submit = async () => {
    console.log(checked.value);
    if (checked.value) {
        showToast({
            message: checked.value[0],
            position: 'middle'
        })
        //支付成功之后删除购物车内容
        const params = { userid: userid }
        const res = await DeleteCarItem(params)
        console.log(res);
        router.push('/car')
    }
    // deleteall()
}
onBeforeUpdate(() => {
    checkboxRefs.value = [];
});

</script>

<style lang="scss" scoped>
.van-cell {
    color: black;
}

.navbar {
    position: sticky;
    top: 0;
    z-index: 10000;
    background-color: white;
}

.payfor {
    height: 150px;
    line-height: 150px;
    text-align: center;
    background-color: #FF7ABE;
    color: red;
    font-weight: 600;

    .left {
        font-size: 18px;
    }

    .right {
        font-size: 30px;
    }
}

.paymethod {
    color: white;
}

.button {
    position: absolute;
    bottom: 20px;
    left: 10%;
    width: 80%;
}
</style>